使用element

您所在的位置：网站首页 › el-table expand展开后又会收缩 › 使用element

使用element

2024-02-26 16:41| 来源: 网络整理| 查看: 265

实现效果

1、不点击小箭头，点击其他列中的某个按钮展开行内容。

2、隐藏小箭头列（既然我们点击表格其他单元格展开行内容了，一般就不需要小箭头列了）

3、只展开一行内容

先直接上代码：

查看详情 {{ props.row.name }} export default { data() { return { tableData5: [{ id: '1', name: '好滋好味鸡蛋仔1', desc: '荷兰优质淡奶，奶香浓而不腻1', }, { id: '2', name: '好滋好味鸡蛋仔2', desc: '荷兰优质淡奶，奶香浓而不腻2', }, { id: '3', name: '好滋好味鸡蛋仔3', desc: '荷兰优质淡奶，奶香浓而不腻3', }, { id: '4', name: '好滋好味鸡蛋仔4', desc: '荷兰优质淡奶，奶香浓而不腻4', }] }; }, methods: { toogleExpand(row) { let $table = this.$refs.table; this.tableData5.map((item) => { if (row.id != item.id) { $table.toggleRowExpansion(item, false) } }) $table.toggleRowExpansion(row) } } }

我们一般会点击按钮去展开查看详情，所以我们替换箭头为“查看详情”按钮，通过toggleRowExpansion方法展开合闭expand。效果如图：

image.png

自己项目中遇到的问题是想要隐藏小箭头列，无意间发现这篇文章，原来只需要设置width="1"就行了。

因为我设置了** **会多出1px的边距，所以我们可以再在最外层放一个空的div，设置样式overflow:hidden；再设置此table的样式margin-left:1px；好了，完美实现。（自己的项目中没有遇到1px影响效果的情况，可以直接设置宽度为1px即可）

【本文地址】

使用element

使用element

今日新闻

推荐新闻